

//获取操作对象

var box=document.querySelector('._body');

//获取url地址栏中的参数

var search=location.search;

//获取当前账号

var name1=getCookie('name');

// //存放当前商品信息的对象

var o1;

//判断当前search是否有值

if(search){

    //获取当前参数的值

    // 用=号分割地址数据id=2,获取第二个参数
    var id=search.split('=')[1];

    //使用async和await去服务端获取当前id所对应的数据
 
    (async function(){

        var txt=await PromiseAjax({

            url:"../php/xiangQingYe.php",

            data:"uid="+id

        })
        // console.log(txt)

         //把当前字符串转为对象

        o1=eval('('+txt+')')
        console.log(o1)

        //创建字符串，存放需要渲染的内容

        var str=`
        
        <div class="_body">
            <div class="w">
                <div class="_body_left">
                    <!-- 放大镜盒子 -->
                    <div class="_body_left_top boxs">
                        <div class="boxs">
                            <div class="box1">
                                <img src="${o1.img}" alt="">
                                <div class="mark"></div>
                            </div>
                            <div class="box2">
                                <img src="${o1.img}" alt="">
                            </div>
                        </div>
                        <ul class="ul_1">
                            <li class="bd"><img src="${o1.img}" alt=""></li>
                            <li><img src="../images/xiangQingYe_img/images/07.jpg" alt=""></li>
                            <li><img src="../images/xiangQingYe_img/images/08.jpg" alt=""></li>
                            <li><img src="../images/xiangQingYe_img/images/09.jpg" alt=""></li>
                            <li><img src="../images/xiangQingYe_img/images/10.jpg" alt=""></li>
                        </ul>
                        
                    </div>
                    
                
                    <script src="../js/fangDaJing.js"></script>
                   

                    <div class="guanZhu">
                        <p><i></i><a href="">关注</a><i></i><a href="">对比</a><a href="" class="a_1">举报</a></p>
                    </div>
                    
                </div>

                    <!-- 中间的大盒子 -->
                <div class="_body_center">
                    <div>
                        <p> <img src="../images/xiangQingYe_img/images/06.png" alt=""> ${o1.title1}</p>
                    </div>
                    <div>
                        <p>${o1.title2}</p>
                    </div>
                    <div>
                        <p>￥ <span>${o1.price}</span> 降价通知 累计评价  10万+
                        </p>
                        <p>促　销 多买优惠 满2件,总价打9.50折;满3件,总价打9折   详情>>
                        </p>
                    </div>
                    <!-- 配送至 -->
                    <div>
                        <div> 
                            <span>配 送 至</span>
                        </div>
                        <div>
                            <p>
                                <select name="" id="">
                                    <option value="">广东广州市白云区城区</option>
                                </select>
                                有货支持
                                可配送港澳台|7天价保|闪电退款|24H发货
                            </p>
                            <p>在线支付免运费</p>
                            <p>次日达|送货上门|
                                <select name="" id="">
                                <option value="">预约送货</option>
                                <option value="">部分收货</option>
                                <option value="">自提</option>
                                </select>
                            </p>
                            <p>
                                由 京东 发货, 闪魔旗舰店提供售后服务. 23:10前下单,预计明天(05月16日)送达
                            </p>
                                
                        </div>
                    </div>
                    <!-- 选择颜色 -->
                    <div>
                        <div>
                            <span>选择颜色</span>
                        </div>
                        <div>
                            <p>苹果13【全透明】十米防摔^透出裸机苹果13【全透明】十米防摔^透出裸机</p>
                            <p>苹果13Pro【全透明】十米防摔^透出裸机苹果13Pro【全透明】十米防摔^透出裸机</p>
                            <p>苹果13Promax【全透明】十米防摔^透出裸机苹果13Promax【全透明】十米防摔^透出裸机</p>
                            <p>苹果13mini【全透明】十米防摔^透出裸机苹果13mini【全透明】十米防摔^透出裸机</p>
                        </div>

                    </div>
                    <!-- 套装 -->
                    <div>
                        <div>
                            <span>套装</span>
                            <span>京东服务</span>
                            <span>白条分期</span>
                        </div>
                        <div>
                            <p>
                                <span>优惠套装1</span>
                                <span>优惠套装2</span>
                                <span>优惠套装3</span>
                                <span>优惠套装4</span>
                            </p>
                            <p>
                                <select name="" id="">
                                    <option value="">意外换新1年 ￥15.00 </option>
                                    <option value="">安卓换电池 ￥129.00</option>
                                </select>
                                <select name="" id="">
                                        <option value="">安卓换电池 ￥129.00 </option>
                                        <option value="">意外换新一年</option>
                                </select>        
                            </p>
                            <p>
                                <span>不分期</span>
                                <span>￥6.74 x 3期</span>
                                <span>￥3.40 x 6期</span>
                                <span>￥1.74 x 12期</span>
                                <span>￥0.91 x 24期</span>
                            </p>
                        </div>

                    </div>

                    <!-- 加入购物车 -->
                    <div>
                        <div>
                            <input type="text" value="1">
                            <button>+</button>
                            <button>-</button>
                        </div>
                        <div>
                            <a href="#">加入购物车</a>
                            <a href="./gouWuChe.html">立即购买</a>
                        </div>


                    </div>
                   
                </div>
                <div class="_body_right">
                    <div>
                        <p>看了又看</p>
                    </div>
                    <ul>
                        <li>
                            <img src="../images/xiangQingYe_img/images/15.jpg" alt="">
                            <p><a href="#">闪魔 苹果12手机壳 iPhone12 Pro max气囊防摔软壳12mini全包透明保护套 苹果12【全透明】十米防摔^透出裸机闪魔 苹果12手机壳 iPhone</a></p>
                            <span>￥19.80</span>
                        </li>
                        <li>
                            <img src="../images/xiangQingYe_img/images/15.jpg" alt="">
                            <p><a href="#">闪魔 苹果12手机壳 iPhone12 Pro max气囊防摔软壳12mini全包透明保护套 苹果12【全透明】十米防摔^透出裸机闪魔 苹果12手机壳 iPhone</a></p>
                            <span>￥19.80</span>
                        </li>
                        <li>
                            <img src="../images/xiangQingYe_img/images/15.jpg" alt="">
                            <p><a href="#">闪魔 苹果12手机壳 iPhone12 Pro max气囊防摔软壳12mini全包透明保护套 苹果12【全透明】十米防摔^透出裸机闪魔 苹果12手机壳 iPhone</a></p>
                            <span>￥19.80</span>
                        </li>
                        <li>
                            <img src="../images/xiangQingYe_img/images/15.jpg" alt="">
                            <p><a href="#">闪魔 苹果12手机壳 iPhone12 Pro max气囊防摔软壳12mini全包透明保护套 苹果12【全透明】十米防摔^透出裸机闪魔 苹果12手机壳 iPhone</a></p>
                            <span>￥19.80</span>
                        </li>
                    </ul>
                    <ul>
                        <li class="lili liV"><a href="#">∧</a></li>
                        <li class="lili"><a href="#"∨</a></li>
                    </ul>
                </div>

                ${o1.div}
                
            </div>
        </div>
        `

        box.innerHTML=str

        // 重新渲染放大镜
        //获取操作对象
        var boxs=document.querySelector('.boxs')
        //实例化对象
        new Fdj(boxs)


        //重新渲染点击反放大镜的图片切换
        var ul=document.querySelector("._body_left_top") 
        var box1=document.querySelector(".box1")
        // var mark=document.querySelector('.mark')
        var box2=document.querySelector(".box2")
        var box2Img=box2.querySelector('img')
        var ul1=ul.querySelector(".ul_1")
        var lis=ul1.querySelectorAll("li")
        for(var i=0;i<lis.length;i++){
            //给每个li对象绑定点击事件
            lis[i].onclick=function(){
                //清除所有li对象中的class属性
                // for(var j=0;j<lis.length;j++){
                //     lis[j].className=''
                // }
                //获取当前li对象中img的图片地址
                var url=this.lastElementChild.getAttribute('src')
                console.log(url)
                //把当前图片地址赋值给上面的图片
                box1.firstElementChild.setAttribute('src',url)
                box2.firstElementChild.setAttribute('src',url)
                //给当前点击的li对象添加class属性
                // this.className='bd'
            }
        }

    })()

}else{

    alert("非法进入")

    location='../html/lieBiaoYe.html'

}
//给大盒子对象绑定点击事件

box.onclick=function(e){

    //事件对象兼容

    var e = e || window.event

    //获取操作目标

    var tg=e.target || e.srcElement

    //判断当前点击的按钮是否为“加入购物车”

    if(tg.innerHTML=='加入购物车'){

        // console.log("11")

        //判断当前name1是否有值

        if(name1){

            //获取该账号在localStorage中存储的商品信息

            var lists=localStorage.getItem(name1) || "[]"

            //把当前获取的内容，转为数组对象

            lists=eval('('+lists+')')

            //判断当前数组中是否有元素

            if(lists.length>0){

                //设置开关判断，true表示该商品存在，false表示不存在

                var bool=false

                //遍历数组元素

                lists.forEach(item=>{

                    //判断数组中的商品id是否等于当前添加的商品id

                    if(o1.id==item.id){

                        //直接修改当前商品的数量

                        item.cart_number++

                        bool=true

                    }

                })
                console.log(lists)

                if(bool){

                    //把当前数组存放到localStorage中

                    localStorage.setItem(name1,JSON.stringify(lists))

                }else{

                   //修改当前商品的数量

                    o1['cart_number']=1

                    //直接把当前要添加的商品存放到数组

                    lists.push(o1)

                    //把当前数组存放到localStorage中

                    localStorage.setItem(name1,JSON.stringify(lists)) 

                }

                

            }else{
                //修改当前商品的数量
                o1['cart_number']=1
                //直接把当前要添加的商品存放到数组
                lists.push(o1)
                //把当前数组存放到localStorage中
                localStorage.setItem(name1,JSON.stringify(lists))
            }
    
        }else{
            alert("你还未登录")
            //获取当前url
            var url=location.href
            //跳转到登录页
            location="./dengLu.html?url2="+url
        }
    }

}
